<template>
	<view>
		<view v-if="isShow" @touchmove.stop.prevent="moveHandle" class="mask">
		</view>
		<view v-if="isShow" class="pop">
			<view style="height: 80%; width: 100%;">
				<slot></slot>
			</view>
			<view style="height: 20%; width: 100%;display: flex;">
				<view @tap="no" style="width: 50%; line-height: 100rpx; text-align: center;">取消</view>
				<view @tap="ok" style="width: 50%; border-radius:0 0 15rpx 0; line-height: 100rpx; background-color: #02C9FC; text-align: center;">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			callback: {
				type:Function,
				default:() => ()=>{
					return new Promise((resolve,rejsct)=>{
						resolve()
					})
				}
			},
		},
		data() {
			return {
				isShow: false
			}
		},
		methods: {
			changeShow() {
				console.log(this.isShow)
				this.isShow = true
				// if(this.isShow){
				// 	this.isShow = false
				// }else{
				// 	this.isShow = true
				// }
			},
			ok: function() {
				this.isShow = false
				this.$emit('checkOk',{})
			},
			no() {
				var that = this
				that.isShow = false
			},
			moveHandle() {}
		}
	}
</script>

<style>
	.pop {
		width: 650rpx;
		height: 500rpx;
		position: fixed;
		top: 300rpx;
		left: 50rpx;
		background-color: #FFFFFF; 
		z-index: 150;
		border-radius: 15rpx;
		animation: show 0.5s;
	}

	@keyframes show {
		from {
			transform: scale(0); 
/* 			font-size: 0rpx;
			width: 0rpx;
			height: 0rpx; */
		}

		to {
			transform: scale(1); 
/* 			font-size: 30rpx;
			width: 650rpx;
			height: 500rpx; */
		}
	}

	.mask {
		opacity: 0.4;
		top: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		z-index: 100;
	}
</style>
